import Pagination from "@/components/Pagination";
import { Flex, HStack, Text,Image,Icon, Box, Popover, PopoverTrigger, PopoverBody,PopoverContent } from "@chakra-ui/react";
import {FC, memo, ReactNode, useEffect, useState} from "react";
import { ChevronDownIcon,ChevronUpIcon } from "@chakra-ui/icons";
import { songsPopoverItems } from "@/data/songs-popover-items";
import TextTag from "@/components/TextTag";
import TextButton from "@/components/TextButton";
import SongsAlbums from "@/components/songs-albums";
import { Album } from "@/faker/album/albums";
import { replaceSongList,setCurrentSong,setIsPlaying,setCurrentTime } from '@/store/modules/player/reducer';
import { useAppDispatch, useAppSelector } from "@/hooks/store";

interface IProps {
    children?:ReactNode
}


const Songs :FC<IProps>  = () =>{
    
    const dispatch = useAppDispatch()



    const [isShow, setIsShow] = useState(false)
    const [currentTypeIndex, setCurrentTypeIndex] = useState(0);
    const [currentSubTypeIndex, setCurrentSubTypeIndex] = useState("1");
    const onChangeSubType = (index:string) => {
        setCurrentSubTypeIndex(index);
    }
    const {albums} = useAppSelector(state => state.recommend)


    const onHandleClick = (id: number) => {
        const selectedAlbum = albums.find((album:Album) => album.id === id);
        if (selectedAlbum) {
            dispatch(replaceSongList(selectedAlbum.songs));
        }
    };
    return (
        <Flex flexDirection="column" mt={8} >
            <HStack alignItems="center"  >
                <Popover placement="bottom-start" strategy="fixed">
                    <PopoverTrigger>
                        <HStack cursor="pointer" onClick={() => {setIsShow(!isShow)}} mr={4}>
                        <Text fontWeight="bold" fontSize="20px" >精选歌单</Text>
                        {isShow ? (
                            <Icon  as={ChevronDownIcon} w={6} h={6} /> 
                        ) : (
                            <Icon as={ChevronUpIcon} w={6} h={6}/>
                        )}
                        </HStack>
                    </PopoverTrigger>
                    <PopoverContent 
                        minW={{ base: "100%", md: "768px", lg: "1024px" }} 
                        border="none" 
                        boxShadow="none"
                        _focus={{ boxShadow: 'none' }}
                        transform="translateX(0) !important"
                    >
                        <PopoverBody p={0} >
                            <Box  p={4}  shadow="md" border="none">
                                {songsPopoverItems.map((item, index) => (
                                    <Box key={index}>
                                        <HStack>
                                            <Icon as={item.icon} w={4} h={4} />
                                            <Text fontWeight="bold" fontSize="14px">{item.name}</Text>
                                        </HStack>
                                        <Flex mr={4} flexWrap="wrap" gap={2} m={2}>
                                            {item.subItems.map((subItem) => (
                                                <TextButton 
                                                    key={subItem.id}
                                                    text={subItem.name}  
                                                    onClick={() => onChangeSubType(subItem.id)} 
                                                    isActive={subItem.id === currentSubTypeIndex} 
                                                />
                                            ))}
                                        </Flex>
                                    </Box>
                                ))}
                            </Box>
                        </PopoverBody>
                    </PopoverContent>
                </Popover>
                
                <TextTag isActive={currentTypeIndex === 0} onClick={() => setCurrentTypeIndex(0)}>最新</TextTag>
                <TextTag isActive={currentTypeIndex === 1} onClick={() => setCurrentTypeIndex(1)}>最热</TextTag>
            </HStack>
            
            { albums.length > 0 && <SongsAlbums onHandleClick={onHandleClick} albums={albums} />}
            <Pagination totalPages={10} onPageChange={() => {}} />
        </Flex>
    )
}

export default memo(Songs)
